<template>
  <el-dialog
    title="换场"
    :visible.sync="showReplace"
    :close-on-click-modal="modalDialog"
    :close-on-press-escape="modalDialog"
  >
    <!-- <div class="xbt">
      客户类型：{{ details.userType == 0 ? "会员登记" : "散客登记" }}
    </div> -->
    <div class="zbt">客户信息：</div>
    <div v-if="details.userType == 0 && membergh" class="member">
      <div>姓名：{{ membergh.nickName }}</div>
      <div>手机号：{{ membergh.phone }}</div>
      <div>会员等级：{{ membergh.cardName }}</div>
      <div>充值余额：<span>{{ membergh.remainingMoney || 0 }}</span></div>
      <div>赠送余额：<span>{{ membergh.remainingGiveMoney || 0 }}</span></div>
    </div>
    <div v-if="details.userType == 1" class="member">
      <div>姓名：{{ details.userName }}</div>
      <div v-if="details.userPhone">手机号：{{ details.userPhone }}</div>
    </div>
    <div class="xbt">
      <div>预定金额：</div>
      <div><b>{{ details.allPrice }}</b>元</div>
    </div>
    <div v-if="details.remarks" class="xbt">
      <div>备注信息：</div>
      <div>{{ details.remarks }}</div>
    </div>
    <div class="zbt">预定场地：<span @click="allCheck">全选</span></div>
    <div class="replace-content">
      <el-checkbox-group v-model="checkList">
        <div v-for="(item, index) in details.siteList" :key="index" class="content">
          <div>{{ index + 1 }}</div>
          <div>{{ item.siteModelName }}</div>
          <div>{{ item.day + ' ' + item.beginTime + " - " + item.endTime }}</div>
          <div>¥{{ item.price }}</div>
          <div><el-checkbox :label="item.id"><span style="display: none">1</span></el-checkbox></div>
        </div>
      </el-checkbox-group>
    </div>
    <div class="zbt">更换场地：<span @click="replacementBtn">选择场地</span></div>
    <div v-if="reserveForm && reserveForm.length > 0" class="replace-content b">
      <div v-for="(item, index) in reserveForm" :key="index" class="content">
        <div>{{ index + 1 }}</div>
        <div>{{ item.name }}</div>
        <div>{{ item.day + ' ' + item.beginTime + " - " + item.endTime }}</div>
        <div>¥{{ item.price }}</div>
        <div class="delete" title="删除当前场次" @click="deleteReserve(index)">删除</div>
      </div>
    </div>
    <Replacement ref="replacement" @replacementList="replacementList" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancelReplace">取消</el-button>
      <el-button :loading="subLoading" type="primary" @click="clickReplace">确认更换</el-button>
    </div>
  </el-dialog>
</template>
<script>
import {
  changeReserve
} from '@/api'
import store from '@/store'
import Replacement from '@/components/replacement.vue'
export default {
  components: {
    Replacement
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      showReplace: false, // 弹窗
      details: {},
      membergh: '',
      siteIds: [],
      reserveForm: [],
      subLoading: false,
      activeDate: '',
      checkList: [],
      activeProject: ''
    }
  },
  methods: {
    showBtn(membergh, details, activeDate, activeProject, siteIds) {
      this.showReplace = true
      this.membergh = membergh
      this.details = details
      this.activeDate = activeDate
      this.activeProject = activeProject
      this.siteIds = []
      this.reserveForm = []
      this.checkList = siteIds || []
    },
    // checkChange() {
    //   console.log(12312, this.checkList)
    // },
    allCheck() {
      if (this.checkList.length === this.details.siteList.length) {
        this.checkList = []
      } else {
        const arr = [...this.details.siteList]
        this.checkList = arr.map((e) => e.id)
      }
    },
    // 换场
    cancelReplace() {
      this.membergh = ''
      this.showReplace = false
    },
    replacementList(e) {
      this.siteIds = e.siteIds
      this.reserveForm = e.reserveForm
    },
    replacementBtn() {
      const checkList = this.checkList
      const siteList = [...this.details.siteList]
      const arr = []
      siteList.forEach(e => {
        checkList.forEach(s => {
          if (e.id === s) {
            arr.push(e)
          }
        })
      })
      this.$refs.replacement.showBtn(this.activeDate, this.activeProject, arr)
    },
    deleteReserve(e) {
      this.siteIds.splice(e, 1)
      this.reserveForm.splice(e, 1)
    },
    clickReplace() {
      const ids = this.details.siteList.map(e => e.id)
      const siteIds = [...this.siteIds]
      const checkList = [...this.checkList]
      if (this.siteIds.length === 0) {
        this.$message.info('请选择更换场次')
        return
      }
      if (this.siteIds.length !== this.checkList.length) {
        this.$message.info('更换场次数量和选择更换场次数量保持一致')
        return
      }
      const arr = ids.filter(item => !checkList.includes(item))
      this.subLoading = true
      changeReserve({
        param: {
          reserveAndOrderId: this.details.id,
          siteIds: [...siteIds, ...arr]
        }
      })
        .then((res) => {
          this.subLoading = false
          if (res.errorCode === '000000') {
            this.$message.success('换场成功')
            this.showReplace = false
            this.$emit('hcSccess')
          }
        })
        .catch(() => {
          this.subLoading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/variables.scss';

.zbt {
  font-size: 16px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #222222;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;

  span {
    color: $primaryColor;
    cursor: pointer;
    font-size: 14px;
    font-weight: normal;
  }
}

.member {
  width: 100%;
  background: #F7F7F7;
  border-radius: 2px;
  padding: 16px;
  box-sizing: border-box;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;

  div {
    font-size: 13px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #222222;
    width: 33.33%;
    line-height: 1.5;

    &:nth-of-type(4),
    &:nth-of-type(5) {
      margin-top: 5px;
    }

    span {
      color: $SecondColor;
    }
  }
}

.xbt {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #222222;
  margin-bottom: 20px;
  line-height: 1.5;
  display: flex;
  justify-content: space-between;

  b {
    font-size: 22px;
    color: $SecondColor;
    margin-right: 6px;
  }
}

.title {
  font-size: 16px;
  font-weight: bolder;
  color: #222222;
  line-height: 2;
  margin-bottom: 15px;

  b,
  span {
    color: $SecondColor;
  }

  span {
    font-size: 13px;
    font-weight: normal;
  }

  strong {
    width: 96px;
    height: 38px;
    border-radius: 2px;
    background-color: $primaryColor;
    color: #fff;
    text-align: center;
    cursor: pointer;
    margin-right: 12px;
    display: inline-block;
    line-height: 38px;
    font-size: 14px;
  }
}

.replace-content {
  margin-top: 15px;
  background: #F7F7F7;
  border-radius: 2px;
  box-sizing: border-box;
  line-height: 2;
  padding: 15px;
  margin-bottom: 20px;

  &.b {
    margin-bottom: 0;
    background: #F4F7FC;
  }

  .content {
    display: flex;
    box-sizing: border-box;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;

    div {
      &:nth-of-type(1) {
        width: 10%;
      }

      &:nth-of-type(2) {
        width: 20%;
      }

      &:nth-of-type(3) {
        width: 50%;
      }

      &:nth-of-type(4) {
        width: 14%;
      }

      &:nth-of-type(5) {
        width: 6%;
        display: flex;
        justify-content: flex-end;
      }

      &.delete {
        cursor: pointer;
      }
    }

  }
}
</style>
